<template>
  <ZZDialog class="settings-measure" title="工具测量" @close="callbackClose()">
    <div class="btn-group">
      <div @click="drawPolyline(false)" class="tool-btn">
        <div class="tool-thum" style="background: #dd751b"><img src="./image/measure-length.svg" alt="空间距离" /></div>
        <span class="btn_none">空间距离</span>
      </div>

      <div @click="drawPolyline(true)" class="tool-btn">
        <div class="tool-thum" style="background: #c092fe">
          <img src="./image/measure-length2.svg" alt="贴地距离" />
        </div>
        <span class="btn_none">贴地距离</span>
      </div>

      <!-- <div @click="drawSection()" class="tool-btn">
                <div class="tool-thum" style="background: #88b8ff;"><img src="./image/measure-section.svg" alt="剖面"></div>
                <span class="btn_none"> 剖面 </span>
            </div> -->

      <div @click="drawPolygon(false)" class="tool-btn">
        <div class="tool-thum" style="background: #3de3f4"><img src="./image/measure-area.svg" alt="面积" /></div>
        <span class="btn_none">水平面积</span>
      </div>

      <div @click="drawPolygon(true)" class="tool-btn">
        <div class="tool-thum" style="background: #c092fe"><img src="./image/measure-area.svg" alt="面积" /></div>
        <span class="btn_none">贴地面积</span>
      </div>

      <div @click="measureAngle" class="tool-btn">
        <div class="tool-thum" style="background: #95d333"><img src="./image/measure-angle.svg" alt="角度" /></div>
        <span class="btn_none">角度</span>
      </div>

      <div @click="drawHeight" class="tool-btn">
        <div class="tool-thum" style="background: #55d5a0"><img src="./image/measure-height.svg" alt="高度差" /></div>
        <span class="btn_none">高度差</span>
      </div>

      <div @click="drawHeightsuper" class="tool-btn">
        <div class="tool-thum" style="background: #37bc41">
          <img src="./image/measure-height-sup.svg" alt="三角测量" />
        </div>
        <span class="btn_none">三角测量</span>
      </div>

      <div @click="measurePoint" class="tool-btn">
        <div class="tool-thum" style="background: #babc31"><img src="./image/measure-coor.svg" alt="坐标测量" /></div>
        <span class="btn_none">坐标测量</span>
      </div>
    </div>
    <el-row :gutter="20" style="margin-top: 5px">
      <el-col :span="12" :offset="6">
        <el-checkbox
          v-model="checkedonlyPickModel"
          @change="handleCheckPickModelPositionChange"
          label="仅测量模型(不拾取地形)"
          size="large"
        />
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 5px" v-if="blcl">
      <el-col :span="16" :offset="6">
        <el-form-item label="单位">
          <div v-if="blength">
            <el-select v-model="valuelength" @change="lengthchange" class="m-4" placeholder="Select">
              <el-option v-for="item in optionslength" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
          <div v-if="!blength">
            <el-select v-model="valuearea" @change="areachange" class="m-4" placeholder="Select">
              <el-option v-for="item in optionsarea" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 5px">
      <el-col :span="12" :offset="6">
        {{ valuelabel }}
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 5px">
      <el-col :span="12" :offset="6">
        <el-button @click="callbackClose()" type="primary" round>清空测量数据</el-button>
      </el-col>
    </el-row>
  </ZZDialog>
</template>

<script setup lang="ts">
import { ref, onBeforeMount, onMounted } from 'vue';
import { useViewer } from '@/stores/viewer';
import ZZDialog from '@/common/ZZDialog.vue';
// import { ElLoading } from 'element-plus';
let viewer: any; //场景视图
let measureControl: any; //测量控件
const blength = ref(true); //判断距离还是面积
const blcl = ref(true);
const valuelabel = ref('');

const valuelength = ref('auto');
const optionslength = [
  {
    label: '自动',
    value: 'auto'
  },
  {
    label: '米',
    value: 'm'
  },
  {
    label: '公里',
    value: 'km'
  },
  {
    label: '海里',
    value: 'mile'
  },
  {
    label: '丈',
    value: 'ha'
  }
];

const valuearea = ref('auto');
const optionsarea = [
  {
    label: '自动',
    value: 'auto'
  },
  {
    label: '平方米',
    value: 'm'
  },
  {
    label: '平方公里',
    value: 'km'
  },
  {
    label: '亩',
    value: 'mu'
  },
  {
    label: '公顷',
    value: 'zhang'
  }
];
const theupdateUnit = function (thisType: any, danwei: any) {
  measureControl.updateUnit(thisType, danwei);
};
const areachange = function (value: any) {
  theupdateUnit(thisType, value);

  if (lastVal > 0) {
    const valstr = formatArea(lastVal, value);
    onMeasureChange(valstr, '');
  }
};

const lengthchange = function (value: any) {
  theupdateUnit(thisType, value);

  if (lastVal > 0) {
    const valstr = formatLength(lastVal, value);
    onMeasureChange(valstr, '');
  }
};

const checkedonlyPickModel = ref(false); //是否选择模型

onBeforeMount(() => {
  viewer = useViewer().viewer;
});

onMounted(() => {
  measureControl = new zz3d.analysi.Measure({
    viewer: viewer
  });
});
const callbackClose = function () {
  measureControl?.clearMeasure();
  thisType = '';
  lastVal = 0;
};
let lastVal: any;
let thisType: any;

const onMeasureChange = function (valstr: any, val: string) {
  if (val) lastVal = val;
  valuelabel.value = valstr;
};

const handleCheckPickModelPositionChange = function () {
  viewer.zz.onlyPickModelPosition = checkedonlyPickModel.value;
};
const drawPolyline = function (type: boolean) {
  blcl.value = true;
  blength.value = true;
  measureControl.measureLength({
    unit: valuelength.value,
    terrain: type,
    addHeight: 0.5, //在绘制点基础自动增加高度（单位：米）
    calback: onMeasureChange
  });
};
const drawPolygon = function (btd: boolean) {
  blcl.value = true;

  blength.value = false;
  thisType = 'area';
  lastVal = 0;
  measureControl.measureArea({
    unit: valuearea.value,
    style: {
      color: '#00fff2',
      outline: true,
      outlineColor: '#fafa5a',
      outlineWidth: 1,
      opacity: 0.4,
      clampToGround: btd //贴地
    },
    calback: onMeasureChange
  });
};
const drawHeight = function () {
  blcl.value = true;
  blength.value = true;
  thisType = 'height';
  lastVal = 0;

  measureControl.measureHeight({
    unit: valuelength.value,
    isSuper: false,
    calback: onMeasureChange
  });
};

const drawHeightsuper = function () {
  blcl.value = true;
  blength.value = true;
  thisType = 'super_height';
  lastVal = 0;

  measureControl.measureHeight({
    unit: valuelength.value,
    isSuper: true,
    calback: onMeasureChange
  });
};

// const showSectionResult = function (param: any, val: any) {
//   if (typeof param === 'string') {
//     onMeasureChange(param, val);
//     return;
//   }
//   onMeasureChange(param.distancestr, param.distance);
// };
// const drawSection = function () {
//   blcl.value = true;
//   let loading: any;
//   blength.value = false;
//   thisType = 'section';
//   lastVal = 0;
//   measureControl.measureSection({
//     unit: valuearea.value,
//     splitNum: 300, //插值次数
//     onStart: function () {
//       //开始分析前回调(异步)
//       loading = ElLoading.service({
//         lock: true,
//         text: '正在计算',
//         background: 'rgba(0, 0, 0, 0.7)'
//       });
//     },
//     onEnd: function () {
//       //分析完成后回调(异步)
//       loading.close();
//     },
//     calback: showSectionResult
//   });
// };
const measureAngle = function () {
  blcl.value = false;
  thisType = 'angle';
  lastVal = 0;
  measureControl.measureAngle();
};
const measurePoint = function () {
  blcl.value = false;
  thisType = 'point';
  lastVal = 0;
  measureControl.measurePoint();
};

const formatArea = function (val: any, unit: any) {
  return measureControl.formatArea(val, unit);
};
const formatLength = function (val: any, unit: any) {
  return measureControl.formatLength(val, unit);
};
</script>
<style scoped lang="less">
.btn_none {
  background: none;
  color: #fff;
}

.btn-group {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  padding-left: 20px;
}

.tool-btn {
  cursor: pointer;
  user-select: none;
  min-width: 62px;
  height: 96px;
  box-sizing: border-box;
  margin: 0 30px 10px 0;
  text-align: center;
  padding-top: 12px;
}

.tool-thum {
  transition: all 0.2s ease;
  width: 50px;
  height: 50px;
  margin: 0 auto;
  border-radius: 50%;
  margin-bottom: 10px;
  background: #fd960f;
  cursor: pointer;

  img {
    width: 24px;
    height: 24px;
    margin: 13px;
  }
}

.settings-measure {
  position: absolute;
  width: 300px;
  right: 105px;
  top: 50px;
}
</style>
